<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vuejs</title>
<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		姓<input v-model="firstName" />
		名<input v-model="lastName" />
		<div>{{firstName}}{{lastName}}</div>
		<div>{{fullName}}</div>
		<div>{{count}}</div>
	</div> 
<script>
	new Vue({
		el:'#root',
		data:{
			firstName:'',
			lastName:'',
			count:0,
		},
		/**
		computed 意思是 一个属性由其他的属性计算得来.
		好处,如果firstName和lastName 的值都没改变,再次使用fullname的时候,不会重现计算fullName的值,会使用上一次的缓存值,
		只有firstName 和lastName 其中 的一个发生改变的时候,才会重新计算
		*/
		computed:{//计算属性
			fullName:function(){
				return this.firstName +' '+this.lastName;
			}
		},
		watch:{//侦听器
			firstName:function(){
				this.count ++ ;
			},
			lastName:function(){
				this.count ++ ;
			},
		}
	});
</script>
</body>
